<template>
    <div class="list">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item
                        :title="item.name"
                        v-for="item in shoptype"
                        :key="item.type"
                        @click="change(item.type)"
                    />
                </van-sidebar>
            </van-col>
            <van-col span="18">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in imgs" :key="index">
                        <img :src="item" alt />
                    </van-swipe-item>
                </van-swipe>
                <ul class="shop_box">
                    <li v-for="item in shoplist" :key="item.id">
                        <img :src="item.icon" alt />
                        <p>{{item.name}}</p>
                    </li>
                </ul>
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            active: 0,
            shoptype: [
                { name: "所有分类", type: "all" },
                { name: "配饰", type: "peishi2" },
                { name: "服装", type: "fuzhuang2" },
                { name: "电器", type: "dianqi" },
                { name: "居家", type: "jujia2" },
            ],
            shoplist: [],
            copylist: [],
            imgs: ["img/天气.jpg", "img/小鹿.jpg", "img/雪.jpg"],
        };
    },
    methods: {
        change(val) {
            // console.log(val);
            if (val == "all") {
                this.shoplist = this.copylist;
            } else {
                this.shoplist = this.copylist.filter((item) => {
                    if (val == item.type) {
                        return item;
                    }
                });
            }
        },
    },
    mounted() {
        this.$API.getShopList().then((res) => {
            console.log(res.data.data);
            this.shoplist = res.data.data.concat();
            this.copylist = res.data.data.concat();
        });
    },
};
</script>
<style lang="scss">
.list {
    .my-swipe .van-swipe-item {
        color: #fff;
        width: 100%;
        height: 26vh!important;
        font-size: 20px;
        text-align: center;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .shop_box {
        width: 100%;
        height: 58vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        overflow: auto;
        li {
            width: 44%;
            height: 30vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            img {
                width: 80%;
                height: 60%;
            }
        }
    }
}
</style>